<!-- 考勤统计 -->
<template>
  <a-card :bordered="false">
    <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-form-item label="方案名称">
        <a-input v-model="queryParam.templateName" />
      </a-form-item>
      <a-form-item label="方案编码">
        <a-input v-model="queryParam.templateCode" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
      </a-form-item>
    </a-form>
    <vxe-grid
      ref="vxeTable1"
      border
      align="center"
      resizable
      height="530"
      :loading="loading"
      :toolbar-config="tableToolbar"
      :export-config="{}"     
      :columns="tableColumn"
      @checkbox-change="({records}) =>  this.selectedRow = records"
      @toolbar-button-click="toolbarButtonClickEvent"
      :data="tableData">
      <template v-slot:toolbar_buttons>
        <a-button type="primary" icon="plus" style="margin:0px 8px 0px 0px;" @click="handleAdd">新增</a-button>
        <a-dropdown v-if="selectedRow.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button>批量操作<a-icon type="down" /></a-button>
        </a-dropdown>
      </template>
      <template #operate="{ row }">
        <template>
          <a @click="handleEdit(row)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="tablePage.currentPage"
          :page-size.sync="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
    <salary-template-modal ref="salaryTemplateModal" @ok="modalFormOk"/>
  </a-card>
</template>
<script >
import moment from 'moment'
import { getAction,deleteAction } from '@/api/manage'
import SalaryTemplateModal from './modal/SalaryTemplateModal'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
export default {
  name:'SalaryTemplate',
  components: {
    JSelectUserByDep,
    SalaryTemplateModal
  },
  data() {
    return {
      loading: false,
      queryParam: {
        templateName: '',
        templateCode:''
      },
      tableToolbar: {
        refresh: {
          query: () => {
            this.loadData(1)
          }
        },
        export: true,
        print: true,
        zoom: true,
        slots: {
          buttons: 'toolbar_buttons'
        }
      },
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableColumn: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { field: 'templateName', title: '方案名称' },
        { field: 'templateCode', title: '方案编码'},
        { field: 'deptCode', title: '使用单位',showOverflow:true },
        { field: 'postCode', title: '使用职级',showOverflow:true },
        { field: 'templateStatus', title: '状态' },
        { title: '操作', width: 120, slots: { default: 'operate' } }
      ],
      tableData: [],
      selectedRow:[],
      url: {
        list: '/hr/salary/template/list',
        delete:'/hr/salary/template/delete',
        deleteBatch:'/hr/salary/template/deleteBatch'
      }
    }
  },
  created() {
    this.loadData(1)
  },
  methods: {
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.loadData()
    },
    loadData(arg) {
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.tablePage.currentPage = 1
      }
      this.loading = true
      var param = this.getQueryParams()
      getAction(this.url.list, param).then(res => {
        if(res.success){
          this.tablePage.total = 10
          this.tableData = res.result.records
        }else{
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    toolbarButtonClickEvent({ code }) {
      switch (code) {
        case 'myExport':
          this.$refs.xGrid.exportData({
            type: 'csv'
          })
          break
        case 'refresh':
          this.loadData(1)
          break
      }
    },
    searchQuery() {
      this.loadData(1)
    },
    getQueryParams() {
      // 获取查询条件
      return Object.assign(this.queryParam, this.tablePage)
    },
    handleEdit(data){
      this.$refs.salaryTemplateModal.edit(data)
    },
    handleAdd(data){
      this.$refs.salaryTemplateModal.add()
    },
    handleDelete(id){
      this.loading = true
      deleteAction(this.url.delete, {id:id }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    batchDel(){
      var that = this
      this.$confirm({
        title: '确认删除',
        content: '是否删除选中数据?',
        onOk: function() {
          that.loading = true
          let ids = []
          that.selectedRow.forEach(item => {
            ids.push(item.id)
          })
          deleteAction(that.url.deleteBatch, {ids:ids.join(',') }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadData()
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.loading = false
          })
        }
      })
    },
    modalFormOk(){
      this.loadData(1)
    }
  }
}
</script>
